<template>
	<view class="pageBox">
		<loading v-if="loading"></loading>
		<view v-else>
			
		
		
		<view class="order">
			<view class="order_box">
				<image :src="productInfo.mainImage[0]" mode="aspectFill" class="img"></image>
				<view class="right">
					<view class="name">
						{{productInfo.name}}
					</view>
					<view class="desc">
						<text v-for="(itemA,indexA) in productInfo.benefitPoints" :key="indexA">
						 <text class="text_right">{{itemA}}</text>
						 <text class="text_xhx" v-if="indexA!==productInfo.benefitPoints.length-1">|</text>
						</text>
					</view>
					<view class="price">
						<view class="price_left">
							<view class="priceNew">
								<text class="fontSize">¥</text>{{productInfo.salePrice}}
							</view>
							<view class="priceOld">
								原价{{productInfo.marketPrice}}
							</view>
						</view>
						<view class="price_right">
							<view class="number-box">
								<view class="sub flex-box" @click.stop="onReduce">
									<text class="iconfont icon-jian">-</text>
								</view>
								<text class="input">{{num}}</text>
								<view class="add flex-box" @click.stop="onAdd">
									<text class="iconfont icon-jia" style="font-size:30rpx;">+</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		
		<view class="detail">
			<view class="detail_box">
				<view class="name">
					<view class="left">
						商品总价
					</view>
					<view class="right">
						￥{{totalOldPrice}}
					</view>
				</view>
				<view class="group">
					<view class="left">
						团购优惠
					</view>
					<view class="right">
						- ¥{{favorablePrice}}
					</view>
				</view>
				<!-- <view class="packet group">
					<view class="left">
						红包减免
					</view>
					<view class="right">
						- ¥3
					</view>
				</view> -->
				
				<view class="subtotal">
					<view></view>
					<view class="subAll">
						<view class="sub1">
							优惠¥{{favorablePrice}}
						</view>
						<view class="sub2">
							小计
							<view class="fontColor">
								<!-- ￥{{pointsPrice}} -->
								￥{{newPrice}}
							</view>
							
						</view>
					</view>
				</view>
				
			</view>
		</view>
		
		<view class="member" v-if="mineInfo.memberStatus!=2">
			<view class="member_box">
				<view class="title">
					<view class="top">
						开通休闲吧会员，本单获得<text class="fontColor">{{pointsPrice}}</text>积分
					</view>
					<view class="bottom">
						畅享团购省钱，额外0元享权益还能赚<text class="fontColor">积分当钱花</text>
					</view>
				</view>
				<view class="con">
					<view class="item" :class="index==navIndexOne?'item item_active':'item'" v-for="(item,index) in navOneList" :key="index"
						@click="navClickOne(item,index)">
						<view class="price">
							<view class="view1">
								¥ 
							</view>
							<view class="view2">
								{{item.price}}
							</view>
						</view>
						<view class="desc" v-if="item.cardType==1">
							尝鲜
						</view>
						<view class="desc" v-if="item.cardType==2">
							超值
						</view>
						<view class="desc" v-if="item.cardType==3">
							畅玩
						</view>
						<view class="type">
							<view class="view1">
								{{item.memberDays}}
							</view>
							<view class="view2" v-if="item.cardType==1">
								天月卡
							</view>
							<view class="view2" v-if="item.cardType==2">
								天季卡
							</view>
							<view class="view2" v-if="item.cardType==3">
								天年卡
							</view>
						</view>
						<view class="date">
							额外送{{item.extraDays}}天时长
						</view>
						
						<view class="btn">
							
						</view>
					
						<image src="https://imgs.ynz666.com/test/2025/01/08/NzM3ZmUxNmIyMWIwZjQyM2U3Yzg1ZjVjMTI0Mjc0OTU=.png" mode="aspectFill" class="btn" v-if="index==navIndexOne"></image>
						
						<view class="recommend" v-if="index==1">
							众多用户推荐
						</view>
					</view>
				</view>
				<view class="fot" @click="openPage('member',3)">
					<view class="left">
						<image src="https://imgs.ynz666.com/test/2025/01/08/MWNhZWY2ZjU5ZWVjY2YxZjQyYTE1YzNjMDY5OTAwYzg=.png" mode="aspectFill" class="img"></image>
						<view class="name">
							平台所有权益会员<text class="fontColor">0元享</text>
						</view>
					</view>
					<view class="right">
						<view class="name">
							吃喝玩乐…
						</view>
						<image src="../../static/index/index_right.png" mode="aspectFill" class="img"></image>
					</view> 
				</view>
			</view>
		</view>
		
		
		<view class="footBtn">
			<view class="foot_box">
				<view class="left">
					<view class="fot_top">
						<view class="view1">
							合计：
						</view>
						<view class="view2">
							¥<text class="fontSize">{{totalPrice}}</text>
						</view>
						<view class="view3">
							（团购优惠<text class="fontColor">¥{{favorablePrice}}</text>）
						</view>
					</view>
					<view class="fot_bot">
						共{{num}}件，可获得<text class="fontColor">{{pointsPrice}}</text>积分
						
					</view>
				</view>
				<view class="right" @click="submitOrder">
					提交订单
				</view>
			</view>
		</view>
		
		</view>
	</view>
</template>

<script>
	var app = getApp();
	import {
		apiProductInfo,apiOperationMemberCard,apiOrderGoodsBuy
	} from '../../apis/my.js';
	import gongType from '@/utils/debounce.js';
	import loading from '../../components/loading/loading.vue';
	export default {
		data() {
			return {
				shop_id:'',//商品id
				inviteId:'',//分享人的id
				navIndexOne:10,
				navOneList:[
					{
						price:99,
						desc:'尝鲜',
						typeO:'30',
						typeT:'天月卡',
						date:'额外送3天时长',
						id:0
					},
					{
						price:279,
						desc:'超值',
						typeO:'90',
						typeT:'天季卡',
						date:'额外送7天时长',
						id:1
					},
					{
						price:99,
						desc:'畅玩',
						typeO:'365',
						typeT:'天年卡',
						date:'额外送30天时长',
						id:2
					},
				],
				num: 1,
				productInfo:{},
				memberPrice:0,//会员价格
				memberCardId:'',//当前选中会员的id
				mineInfo:{},
				loading:true,
			}
		},
		components: {
			loading
		},
		computed: {
			// 获取积分
			pointsPrice() {
				
				if(this.num>1){
					let pointsPrice = 0
					pointsPrice =  Math.floor(this.newPrice)*this.productInfo.exchangeRatio
					return Math.floor(pointsPrice);
				}else{
					let pointsPrice = 0
					pointsPrice = this.num * (this.productInfo.bonusPoints)
					return Math.floor(pointsPrice);
				}
				
			},
			// 商品原来的价格-优惠价
			newPrice() {
				let newPrice = 0
				newPrice = this.num * (this.productInfo.salePrice)
				return newPrice.toFixed(2);
			},
			// 优惠价格
			favorablePrice(){
				let favorablePrice = 0
				favorablePrice = this.num *(this.productInfo.marketPrice - this.productInfo.salePrice)
				return favorablePrice.toFixed(2);
			},
			// 商品价格 现价 +会员价格
			totalPrice() {
				let totalPrice = 0
				totalPrice = this.num * (this.productInfo.salePrice)+ this.memberPrice
				return totalPrice.toFixed(2); // 保留两位小数（否则会价格会出现多位小数）
			},
			// 商品原价
			totalOldPrice() {
				let totalOldPrice = 0
				totalOldPrice = this.num * (this.productInfo.marketPrice)
				return totalOldPrice.toFixed(2); // 保留两位小数（否则会价格会出现多位小数）
			},
			
			totalNum() {
				let totalNum = 0
				totalNum = this.num
				return totalNum;
			}
		},
		onLoad(options){
			let that = this;
			that.shop_id = options.store_id;
			
			that.inviteId=options.inviteId
			that.location = app.globalData.latitude + "," + app.globalData.longitude;
			that.getUserInfo();
			that.operationMemberCard();
			that.getDetail(that.shop_id, that.location);
			
			
		},
		methods: {
			getUserInfo() {
				let that = this;
				app.getUserInfo(function(lRes) {
					that.mineInfo = lRes;
					
					if(lRes.memberStatus==2){
						that.memberPrice=0
					}else{
						// 默认为第一个的选中
						// that.memberPrice= that.navOneList[that.navIndexOne].price
					}
					
				})
			},
			// 获取会员卡列表
			operationMemberCard(){
				apiOperationMemberCard().then(res=>{
					this.navOneList=res.data.list
				})
			},
			// 获取商家详情
			getDetail(s_id, location) {
				var that = this
				uni.showLoading();
				const params = {
					productId:  s_id,
					productNewId:'',
					lat: location.split(',')[0],
					lng: location.split(',')[1],
				}
				console.log(params,"params")
				apiProductInfo(params).then(res=>{
					console.log(res,'商户详情')
					that.productInfo = res.data
					that.loading=false
					
					
					
					
					uni.hideLoading();
				})
			},
			navClickOne(item, index){
				if(this.navIndexOne == index){
					this.navIndexOne=10
					this.memberPrice= 0
				}else{
					this.navIndexOne = index
					this.memberPrice= item.price
				}
			},
			// 减
			onReduce() {
				if (this.num == 1) {
					return false
				}
				this.num -= 1
			},
			onAdd() {
				// if (this.num >= this.couponInfo.stock) {
				// 	uni.showToast({
				// 		title: '商品库存不足',
				// 		icon: 'none'
				// 	})
				// 	return false
				// }
			
				// if (this.num >= this.couponInfo.buyNum) {
				// 	uni.showToast({
				// 		title: '已超出商品限购数量',
				// 		icon: 'none'
				// 	})
				// 	return false
				// }
			
			
				this.num += 1
			},
			// 提交订单
			submitOrder:gongType.debounce(function (e){
				var that = this
				let data={
					productId:that.shop_id,
					qty:that.num,
					tel:'',
					memberCardId:'',
					shareMemberId:that.inviteId
				}
				if(that.mineInfo.memberStatus==2){
					data.memberCardId=''
				}else{
					data.memberCardId= that.navIndexOne!=10?that.navOneList[that.navIndexOne].id:''
				}
				apiOrderGoodsBuy(data).then(payment=>{
					switch(payment.code){
						case 0:
							app.WxPayMent(payment.data).then( res => {
								app.getUserInfo(function(lRes){
									that.mineInfo = lRes;
									// uni.navigateBack({
									// 	delta:1
									// })
									uni.navigateTo({
										url: `/pageC/orderAll/orderAll`
									})
									// uni.switchTab({
									// 	url: '/pages/order/order'
									// });
									
								})
							})
						break;
						default:
							uni.showToast({
								title:payment.message,
								icon:'none'
							})
						break;
					}
				})
			}, 1000),
			openPage(page, index) {
				switch (index) {
					case 1:
						uni.navigateTo({
							url: `/pages/${page}/${page}`
						})
						break;
					case 2:
						uni.navigateTo({
							url: `/pageB/${page}/${page}`
						})
						break;
					case 3:
						uni.navigateTo({
							url: `/pageC/${page}/${page}`
						})
						break;
					case 4:
							uni.navigateTo({
								url: `/pageD/${page}/${page}`
							})
							break;
					default:
						break;
				}
			
			},
		}
	}
</script>

<style lang="scss">
page {
	background: #f9f9f9;
}
.pageBox{
	width: 100%;
	padding-bottom: 300rpx;
	.order{
		margin: 20rpx 20rpx 0;
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.order_box{
			padding: 24rpx 20rpx 28rpx;
			display: flex;
			align-items: center;
			background: #fff;
			border-radius: 20rpx;
			.img{
				width: 160rpx;
				height: 160rpx;
				border-radius: 12rpx;
			}
			.right{
				padding-left: 18rpx;
				flex: 1;
				.name{
					font-family: PingFangSC, PingFang SC;
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					word-break: break-all;
					white-space: pre-wrap;
					word-wrap: break-word;
					overflow: hidden;
					display: -webkit-box;
					text-overflow: ellipsis;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
				}
				.desc{
					font-weight: 400;
					font-size: 24rpx;
					color: #666666;
					padding: 8rpx 0 6rpxx;
					.text_xhx{
						margin: 0 10rpx;
					}
				}
				.price{
					display: flex;
					align-items: center;
					justify-content: space-between;
					.price_left{
						.priceNew{
							font-weight: bold;
							font-size: 36rpx;
							color: #FD0303;
							.fontSize{
								font-size: 22rpx;
							}
						}
						.priceOld{
							font-size: 20rpx;
							color: #999999;
							text-decoration-line: line-through
						}
					}
					.price_right{
						display: flex;
						align-items: center;
						justify-content: center;
						.number-box {
							display: flex;
							align-items: center;
							height: 42rpx;
						
							&[type=special] {
								background: #F8DFAE;
						
								.add,
								.sub {
									background: #F8DFAE;
									border-radius: 0;
								}
						
								.input {
									width: 80rpx;
									color: #BA8F39;
								}
						
								.flex-box {
									color: #000;
						      
									.iconfont {
										color: #BA8F39;
									}
								}
						
						
							}
						
							.sub {
								width: 42rpx;
								height: 42rpx;
								background: #FFFFFF;
								border-radius: 10rpx 0rpx 0rpx 10rpx;
								border: 1rpx solid #F0F0F0;
							}
						
							.add {
								width: 42rpx;
								height: 42rpx;
								background: #FFFFFF;
								border-radius: 0rpx 10rpx 10rpx 0rpx;
								border: 1rpx solid #F0F0F0;
							}
						
							.input {
								flex: 1;
								display: flex;
								align-items: center;
								justify-content: center;
								height: 100%;
								width: 104rpx;
								font-size: 28rpx;
								color: #000;
								text-align: center;
							}
						
							.flex-box {
								display: flex;
								justify-content: center;
								align-items: center;
								border-radius: 50%;
								background: #F8F9FA;
							}
						}
					}
				}
			}
		}
	}
	
	.detail{
		margin: 20rpx 20rpx 0;
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.detail_box{
			padding: 24rpx 20rpx 28rpx;
			display: flex;
			flex-direction: column;
			background: #fff;
			border-radius: 20rpx;
			font-weight: bold;
			.name{
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					font-size: 26rpx;
					color: #333333;
				}
				.right{
					font-size: 26rpx;
					color: #333333;
				}
			}
			.group{
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 14rpx;
				padding-bottom: 20rpx;
				.left{
					font-size: 26rpx;
					color: #333333;
				}
				.right{
					font-size: 26rpx;
					color: #FF1D2B;
				}
			}
			// .packet{
			// 	padding-bottom: 20rpx;
			// }
			.subtotal{
				border-top: 2rpx solid #ECECEC;
				padding-top: 14rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.subAll{
					display: flex;
					align-items: center;
					.sub1{
						font-size: 26rpx;
						color: #333333;
						padding-right: 30rpx;
					}
					.sub2{
						color: #333333;
						font-weight: bold;
						display: flex;
						align-items: center;
						font-size: 32rpx;
						.fontColor{
							color: #FF1D2B;
						}
					}
				}
			}
		}
	}
	
	.member{
		margin: 20rpx 20rpx 0;
		width: 710rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.member_box{
			padding: 24rpx 20rpx 28rpx;
			background: #fff;
			border-radius: 20rpx;
			.title{
				padding: 0 6rpx;
				.top{
					font-weight: bold;
					font-size: 28rpx;
					color: #333333;
					.fontColor{
						color: #FF1D2B;
					}
				}
				.bottom{
					padding-top: 8rpx;
					font-size: 24rpx;
					color: #3A3134;
					.fontColor{
						color: #FF1D2B;
					}
				}
			}
			.con{
				padding-top: 34rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.item{
					width: 208rpx;
					height: 280rpx;
					background: linear-gradient( 180deg, #FFFBFA 0%, #FFF0EF 100%);
					border-radius: 20rpx;
					border: 2rpx solid rgba(255,76,76,0.1);
					position: relative;
					.price{
						display: flex;
						align-items: baseline;
						padding: 32rpx 0 0 34rpx;
						.view1{
							font-size: 22rpx;
							color: #310D09;
						}
						.view2{
							font-size: 36rpx;
							color: #310D09;
							padding-left: 4rpx;
							font-weight: bold;
						}
					}
					.desc{
						font-size: 24rpx;
						color: #310D09;
						font-weight: bold;
						padding:16rpx 0 0 34rpx;
					}
					.type{
						color: #310D09;
						font-weight: bold;
						padding: 6rpx 0 14rpx 34rpx;
						display: flex;
						align-items: baseline;
						.view1{
							font-size: 48rpx;
						}
						.view2{
							font-size: 24rpx;
						}
					}
					.date{
						width: 212rpx;
						height: 54rpx;
						background: linear-gradient( 270deg, #FF8746 0%, #FF3F30 100%);
						border-radius: 0rpx 0rpx 20rpx 20rpx;
						position: absolute;
						bottom: 0;
						font-weight: bold;
						font-size: 22rpx;
						color: #FFFFFF;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.btn{
						position: absolute;
						top: 32rpx;
						right: 26rpx;
						width: 36rpx;
						height: 36rpx;
						border: 3rpx solid #C7C7C7;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.recommend{
						width: 148rpx;
						height: 36rpx;
						background: linear-gradient( 180deg, #FE344C 0%, #FF7D57 100%);
						box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(237,128,128,0.48);
						border-radius: 0rpx 20rpx 20rpx 20rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-weight: bold;
						font-size: 20rpx;
						color: #FFFFFF;
						position: absolute;
						top: -18rpx;
						left: 30rpx;
					}
				}
				.item_active{
					border: 2rpx solid #FF3F30;
					.btn{
						
						background: linear-gradient( 180deg, #FF8947 0%, #FF4F45 100%);
						border: 3rpx solid #FF3F30;
						color: #fff;
						font-size: 22rpx;
						font-weight: bold;
					}
				}
			}
			.fot{
				margin-top: 20rpx;
				width: 672rpx;
				height: 80rpx;
				background: linear-gradient( 180deg, #FFFBFA 0%, #FFF0EF 100%);
				border-radius: 20rpx;
				border: 2rpx solid rgba(255,182,182,0.3);
				display: flex;
				align-items: center;
				justify-content: space-between;
				.left{
					display: flex;
					align-items: center;
					padding: 0 0 0 26rpx;
					.img{
						width: 32rpx;
						height: 26rpx;
					}
					.name{
						font-weight: bold;
						font-size: 24rpx;
						color: #310D09;
						padding-left: 8rpx;
						.fontColor{
							color: #FF1A34;
						}
					}
				}
				.right{
					display: flex;
					align-items: center;
					padding: 0 30rpx 0 0;
					.name{
						font-weight: bold;
						font-size: 24rpx;
						color: #310D09;
						margin-right: 12rpx;
					}
					.img{
						width: 18rpx;
						height: 26rpx;
					}
				}
			}
		}
	}
	
	.footBtn{
		width: 100%;
		height: 180rpx;
		background: #fff;
		position: fixed;
		bottom: 0;
		box-shadow: 0rpx -8rpx 22rpx 0rpx #F7F7F7;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		.foot_box{
			padding: 0 46rpx 0 32rpx;
			
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.left{
				.fot_top{
					font-weight:bold;
					display: flex;
					align-items: baseline;
					.view1{
						font-size: 24rpx;
						color: #333333;
					}
					.view2{
						font-weight: bold;
						font-size: 22rpx;
						color: #FF1D2B;
						.fontSize{
							font-size: 32rpx;
						}
					}
					.view3{
						font-weight: bold;
						font-size: 24rpx;
						color: #333333;
						.fontColor{
							color: #FF1D2B;
						}
					}
				}
				.fot_bot{
					font-weight: bold;
					font-size: 24rpx;
					color: #333333;
					.fontColor{
						color: #FF1D2B;
					}
				}
			}
			.right{
				width: 204rpx;
				height: 70rpx;
				background: linear-gradient( 315deg, #FF912B 0%, #FF2420 100%);
				box-shadow: inset 0rpx 2rpx 10rpx 0rpx rgba(255,255,255,0.5);
				border-radius: 45rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				font-size: 30rpx;
				color: #FFFFFF;
			}
		}
	}
	
}
</style>
